Component({
  /**
   * 组件的属性列表
   */
  properties: {
    row: {
      type: Number,
      value: 3
    },
    margin: {
      type: Number,
      value: 10 //rpx
    },
    count: {
      type: Number,
      value: 3 //上传个数
    },
    disable: {
      type: Boolean,
      value: true //是否可以编辑 既添加删除是否可以使用
    },
    urls: {
      type: Array, //默认显示的图片
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    _ratio: 0.5, //默认 1rpx =0.5px
    _urls: [{
      type: 0 // 0 添加按钮 1 图片
    }] //图片信息
  },
  pageLifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      //屏幕宽度
      const {
        windowWidth
      } = wx.getSystemInfoSync()
      console.log("margin 1", this.data.margin)
      this.data._ratio = windowWidth / 750
      this.data.margin *= this.data._ratio
      console.log("margin 2", this.data.margin)
  
      this.createSelectorQuery().select(".container").fields({
        size: true
      }).exec(res => {
        console.log("fields", res)
        const {
          width
        } = res[0]
        let urls = this.data.urls.map(item => {
          return {
            type: 1,
            url: item
          }
        })
        if (this.data.disable) {
          urls = urls.concat(this.data._urls)
          const len = urls.length
          if (len > this.data.count) {
            //说明添加满了，需要移除添加按钮
            urls.pop()
          }
        }
        this.setData({
          size: (width - (this.data.row - 1) * this.data.margin) / this.data.row,
          margin: this.data.margin,
          _urls: urls
        })
      })
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  attached: function () {
    // 在组件实例进入页面节点树时执行
    //屏幕宽度
    const {
      windowWidth
    } = wx.getSystemInfoSync()
    console.log("margin 1", this.data.margin)
    this.data._ratio = windowWidth / 750
    this.data.margin *= this.data._ratio
    console.log("margin 2", this.data.margin)

    this.createSelectorQuery().select(".container").fields({
      size: true
    }).exec(res => {
      console.log("fields", res)
      const {
        width
      } = res[0]
      let urls = this.data.urls.map(item => {
        return {
          type: 1,
          url: item
        }
      })
      if (this.data.disable) {
        urls = urls.concat(this.data._urls)
        const len = urls.length
        if (len > this.data.count) {
          //说明添加满了，需要移除添加按钮
          urls.pop()
        }
      }
      this.setData({
        size: (width - (this.data.row - 1) * this.data.margin) / this.data.row,
        margin: this.data.margin,
        _urls: urls
      })
    })
  },
  detached: function () {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //上传图片
    onClickAdd(e) {
      //当前选择的个数
      const select = this.data._urls.length - 1
      const that = this
      wx.chooseImage({
        count: this.data.count - select,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success(res) {
          const tempFilePaths = res.tempFilePaths.map(item => {
            return {
              type: 1,
              url: item
            }
          }).concat(that.data._urls)

          const len = tempFilePaths.length
          if (len > that.data.count) {
            //说明添加满了，需要移除添加按钮
            tempFilePaths.pop()
          }
          that.setData({
            _urls: tempFilePaths
          })

          that.triggerEvent("selectChange", that.data._urls.filter(item => item.type != 0).map(item => item.url))
        }
      })
    },
    //删除
    onClickDel(e) {
      console.log("del", e)
      const index = e.currentTarget.dataset.index
      //移除
      this.data._urls.splice(index, 1)
      const len = this.data._urls.length
      let add = false
      if (len == 0) {
        add = true //没有元素了，需要添加按钮
      } else {
        add = this.data._urls[len - 1].type == 1 //最后一个是图片，需要添加按钮
      }
      if (add) {
        this.data._urls.push({
          type: 0
        })
      }

      this.setData({
        _urls: this.data._urls
      })
      this.triggerEvent("selectChange", this.data._urls.filter(item => item.type != 0).map(item => item.url))
    },

  },
  observers: {

  }
})